<%--
  Created by IntelliJ IDEA.
  User: QYoung
  Date: 2021/7/14
  Time: 19:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8"/>
    <title>请登录</title>
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <style>
        body {
            background-color: wheat;
        }
    </style>
</head>
<body>
<%
    Cookie[] cookies = request.getCookies();
    String username = null;
    if (cookies != null && cookies.length > 0) {
        for (Cookie cookie : cookies) {
            if ("username".equals(cookie.getName())) {
                username = cookie.getValue();
                break;
            }
        }
    }
    request.setAttribute("username", username);
%>
<h2 style="text-align: center;">用户登录</h2><br/>
<form action="userServlet" method="post" class="form-horizontal" role="form">
    <div class="form-group">
        <div class="container">

            <div class="row">
                <label class="col-lg-2 col-lg-offset-2 control-label glyphicon glyphicon-user"></label>
                <div class="col-lg-4">
                    <input type="text" id="username" name="username" placeholder="用户名长度至少6位,只能包含数字、字母、下划线"
                           class="form-control" value="${username}" onblur="checkAJAX()"
                           required/>
                </div>
                <div class="col-lg-4">
                    <span id="nameMsg"></span>
                </div>
            </div>
            <br/>

            <div class="row">
                <label class="col-lg-2 col-lg-offset-2 control-label glyphicon glyphicon-lock"></label>
                <div class="col-lg-4">
                    <input type="password" id="password" name="password" placeholder="请输入密码"
                           class="form-control col-lg-10" required/>
                </div>
                <div class="col-lg-4">
                    <span id="pwdMsg"></span>
                </div>
            </div>
            <br/>

            <div class="row">
                <label class="col-lg-2 col-lg-offset-2 control-label glyphicon glyphicon-headphones"></label>
                <div class="col-lg-4">
                    <input type="tel" id="tel" name="tel" placeholder="联系电话" class="form-control col-lg-10" required/>
                </div>
                <div class="col-lg-4">
                    <span id="telMsg"></span>
                </div>
            </div>
            <br/>

            <div class="row">
                <div class="col-lg-4 col-lg-offset-5">
                    <button type="submit" class="btn btn-info">立即登录</button>
                    <button type="reset" class="btn btn-warning">重置内容</button>
                </div>
            </div>
        </div>
    </div>
</form>


</body>
</html>
<script src="js/jquery-1.11.1.js"></script>
<script>
    $(function () {
        /*$("#username").blur(function () {
            checkName();
        });*/
        $("input[name='password']").blur(function () {
            checkPwd();
        });
        $("#regform").submit(function () {
            return checkUni() && checkName() && checkPwd() && checkPhone();
        });
        $("#tel").blur(function () {
            checkPhone();
        });

    });

    function checkName() {
        var val = $("input[name='username']").val();
        if (val == "") {
            $("#nameMsg").html("用户名不能为空！").css("color", "red");
            return false;
        } else if (/^[a-zA-Z]\w{5,}/.test(val) == false) {
            $("#nameMsg").html("用户名不合法！").css("color", "red");
            return false;
        }
        $("#nameMsg").html("用户名可用！").css("color", "green");
        $("#username").css("border-color", "greenyellow");
        return true;
    }

    function checkPwd() {
        var val = $("#password").val();
        if (val == "") {
            $("#pwdMsg").html("密码不能为空！").css("color", "red");
            return false;
        } else if (val.length < 8) {
            $("#pwdMsg").html("密码长度至少8位！").css("color", "red");
            return false;
        }
        $("#pwdMsg").html("密码可用！").css({
            "color": "green"
        });
        $("#password").css("border-color", "greenyellow");
        return true;
    }

    function checkPhone() {
        var val = $("#tel").val();
        var telMsg = $("#telMsg");
        if (val == "") {
            telMsg.html("手机号不能为空！").css("color", "red");
            return false;
        }
        return true;
    }

    function checkUni() {
        alert("1");
        var val = $("select").val();
        if (val == 0) {
            alert("院校为必选项！");
            return false;
        }
        return true;
    }

    function checkAJAX() {
        //1、创建XMLHttpRequest对象
        var xmlHttp;
        if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2、打开链接
        var username = document.getElementById("username").value;
        var url = "testAJAXServlet";   //请求的url
        xmlHttp.open("post", url, true);
        //3、注册回调函数
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4) { //ajax状态码：4，表示请求已完成
                if (xmlHttp.status == 200) {    //请求状态码
                    var nameMsg = document.getElementById("nameMsg");
                    nameMsg.innerText = xmlHttp.responseText;
                    nameMsg.style.backgroundColor = "red";
                } else {
                    alert("AJAX请求错误");
                }
            }
        };
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8"); //post方法需要设置请求头
        //4、发送请求
        xmlHttp.send("username="+username);
    }

</script>
